<template>
  <div class="GdwyyAppDevelop">
    <GdwyyAppBigTitle :time="queryParam.dayId"></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main" v-else>
      <GdwyyAppSmallTitle class="block-pd"></GdwyyAppSmallTitle>
      <div class="zl flex-center flex-between fill-w border-box block-pd">
        <div class="item border-box" v-for="(item, index) in zlList" :key="index + 'zl'">
          <div class="top flex-center">
            <img class="icon" :src="require('../../../../assets/imgs/reconsitution/' + item.icon + '.png')" />
            <div class="font-14 color333">{{ item.title }}</div>
          </div>
          <div class="des font-12 color999">发展月累计</div>
          <div class="big-num flex">
            <span class="font-24 main-blue">{{ zlData[item.lj] }}</span>
            <div class="color999 font-12 wcl flex-center">
              <div>完成率</div>
              <div class="color333 bfb">{{ zlData[item.wcl] }}%</div>
            </div>
          </div>

          <div class="flex-center flex-between bottom font-12">
            <div class="label color999">在网</div>
            <div class="num color333">{{ zlData[item.zw] }}</div>
            <!-- <div class="label color999">净增</div>
            <div class="num color333">{{ zlData[item.jz] }}</div> -->
          </div>
        </div>
      </div>

      <div v-for="(item, index) in blockList" :key="index + 'block'" class="zl other">
        <GdwyyAppSmallTitle :title="item.title" class="block-pd"></GdwyyAppSmallTitle>
        <div v-for="(ite, ind) in zlList" :key="ind + 'zlb'" class="block flex-center flex-between block-pd">
          <div class="left item-width">
            <div class="top flex-center">
              <img class="icon" :src="require('../../../../assets/imgs/reconsitution/' + ite.icon + '.png')" />
              <div class="font-14 color333">{{ ite.title }}</div>
            </div>
            <div class="des font-12 color999">发展月累计</div>
            <div class="big-num flex">
              <span class="font-24 main-blue">
                <!-- // 营业模块 只有这一个没有加YY_ -->
                {{ (ite.lj === 'KD_M_LJ_FZ' ? otherData[ite.lj] : otherData[item.target + ite.lj]) || 0 }}
              </span>
              <div class="color999 font-12 wcl">
                完成率 <span class="color333 bfb">{{ otherData[item.target + ite.blockWcl] || 0 }}%</span>
              </div>
            </div>
          </div>
          <div class="right item-width flex-center">
            <div class="line"></div>
            <div class="fill-w">
              <div class="flex-center mgb-5">
                <div class="circle-title font-12 color999 flex-1">在网</div>
                <div class="font-14 color333">{{ otherData[item.target + ite.blockZw] || 0 }}</div>
              </div>
              <!-- <div class="flex-center">
                <div class="circle-title font-12 color999 flex-1">净增</div>
                <div class="font-14 color333">{{ otherData[item.target + ite.jz] || 0 }}</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'

const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018ac23e2a8b000f',
    resultParamsName: 'zlData',
  },
  {
    url: '8a31cdd68a7e768a018ac241ef270010',
    resultParamsName: 'otherData',
  },
]
export default {
  name: 'GdwyyAppDevelop',
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      zlData: {},
      otherData: {},
      zlList: [
        {
          icon: 'fz_ywsj',
          title: '移网手机',
          lj: 'YW_M_LJ_FZ',
          wcl: 'YW_MB_WCL',
          zw: 'YW_M_QL_ZW',
          jz: 'YW_M_JZ',

          blockZw: 'YW_M_LJ_ZW',
          blockWcl: 'YW_M_WCL',
        },
        {
          icon: 'fz_kd',
          title: '宽带',
          lj: 'KD_M_LJ_FZ', // 营业模块 只有这一个没有加YY_
          wcl: 'KD_M_WCL',
          zw: 'KD_M_QL_ZW',
          jz: 'KD_M_JZ',

          blockZw: 'KD_M_LJ_ZW',
          blockWcl: 'KD_M_WCL',
        },
      ],
      blockList: [
        {
          title: '营业',
          target: 'YY_',
        },
        {
          title: '智家',
          target: 'ZJ_',
        },
        {
          title: '社渠',
          target: 'SQ_',
        },
      ],
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
      },
    }
  },

  created() {
    this.loading = true
    this.initData()
    const { setAllRequest, queryParam } = this

    function main(e) {
      if (e.key === '$dialogFinish' && e.newValue) {
        let newValue = e.newValue
        localStorage.setItem('$dialogFinish', '')
        setAllRequest(_apiConfig, { ...queryParam, gridId: localStorage.getItem('$gridId') })
        // window.removeEventListener('storage', main)
      }
    }
    // 此处的监听 似乎是只在app中生效,在本地开的前端服务是不生效的
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      this.setAllRequest(_apiConfig, this.queryParam)
      this.loading = false
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppDevelop {
  margin-bottom: 3.2vw;
  .main {
    background-color: #fff;
    padding-bottom: 3.2vw;
  }
  .block-pd {
    padding: 0 4vw;
    box-sizing: border-box;
  }
  .zl {
    .item {
      .bg('bg-card.png');
      width: 44.5333vw;
      height: 34.6667vw;
      padding: 2.6667vw;
    }
    .top {
      margin-bottom: 1.6vw;
      .icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 2.1333vw;
      }
    }
    .wcl {
      margin-left: 3.7333vw;
      align-self: flex-end;
      transform: translateY(-6px);
    }
    .bfb {
      margin-left: 1.8667vw;
    }
    .bottom {
      // margin-top: 6.4vw;
      margin-top: 13px;
    }
  }

  .other {
    .block {
      .bg('fz_bg.png');
      width: 100%;
      // height: 21.3333vw;
      border-bottom: 0.2667vw solid #f6fbff;
      .left {
        box-sizing: border-box;
        padding: 2.1333vw 2.6667vw;
      }
      .item-width {
        width: 50%;
        box-sizing: border-box;
      }

      .line {
        background: #f5f5f5;
        width: 0.2667vw;
        height: 9.0667vw;
      }
      .right {
        align-self: flex-end;
        transform: translateY(-2.1333vw);

        .circle-title {
          &::before {
            content: '';
            display: inline-block;
            background: #ffffff;
            border: 0.2667vw solid #4d98ff;
            width: 1.0667vw;
            height: 1.0667vw;
            margin-right: 2.1333vw;
            border-radius: 50%;
            margin-left: 2.6667vw;
          }
        }
        .mgb-5 {
          margin-bottom: 1.3333vw;
        }
      }
    }
  }
}
</style>